<!--客户管理-->
<template>
  <div class="customer-management">
    <div class="page-header">
      <h2>客户管理</h2>
      <div class="header-actions">
        <i class="action-icon icon-sync"></i>
        <i class="action-icon icon-user"></i>
        <i class="action-icon icon-bell"><sup>6</sup></i>
        <i class="action-icon icon-question"></i>
      </div>
    </div>

    <div class="content-area">
      <div class="controls-bar">
        <button class="btn btn-primary" @click="onOpenCreate">新建</button>
        <div class="search-filter">
          <label for="keyword">关键词</label>
          <input type="text" id="keyword" v-model="query.customerName" placeholder="请输入客户名称">
          <label for="status">状态</label>
          <select id="status" v-model="query.status">
            <option :value="undefined">全部</option>
            <option :value="0">启用</option>
            <option :value="1">禁用</option>
          </select>
          <button class="btn btn-search" @click="onSearch">搜索</button>
          <button class="btn btn-reset" @click="onReset">重置</button>
        </div>
      </div>

      <div class="table-container">
        <div class="table-actions">
          <div class="selection-info">
            <input type="checkbox" id="select-all-header">
            <label for="select-all-header">全选</label>
          </div>
        </div>
        
        <table class="data-table">
          <thead>
            <tr>
              <th><input type="checkbox" id="select-all-table"></th>
              <th>客户名称</th>
              <th>联系人</th>
              <th>联系人职位</th>
              <th>联系电话</th>
              <th>微信</th>
              <th>邮箱</th>
              <th>详细地址</th>
              <th>开户行</th>
              <th>银行账号</th>
              <th>备注</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in tableData" :key="row.id">
              <td><input type="checkbox" v-model="row._selected"></td>
              <td class="customer-name"><button class="link" @click="viewDetail(row)">{{ row.customerName }} {{ row.customerCode }}</button></td>
              <td>{{ row.contactPersonName }}</td>
              <td>{{ row.contactPosition }}</td>
              <td>{{ row.contactPhone }}</td>
              <td>{{ row.wechat }}</td>
              <td>{{ row.email }}</td>
              <td>{{ row.address }}</td>
              <td>{{ row.bank }}</td>
              <td>{{ row.bankAccountNumber }}</td>
              <td>{{ row.remark }}</td>
              <td>
                <button class="status-btn" :class="row.status === 0 ? 'ok' : 'ban'" @click="toggleStatus(row)">{{ row.status === 0 ? '启用' : '禁用' }}</button>
              </td>
            </tr>
          </tbody>
        </table>
        
        <div class="table-footer">
           <div class="footer-actions">
                          <input type="checkbox" id="select-all-footer" v-model="allSelected">
             <label for="select-all-footer">全选</label>
             <button class="btn btn-export">导出</button>
           </div>
           <div class="pagination">
             <button @click="changePage(query.pageNum - 1)" :disabled="query.pageNum <= 1">&lt;</button>
             <span style="margin: 0 8px;">第 {{ query.pageNum }} / {{ totalPages }} 页</span>
             <button @click="changePage(query.pageNum + 1)" :disabled="query.pageNum >= totalPages">&gt;</button>
             <span style="margin-left: 12px;">{{ query.pageSize }} 条/页</span>
           </div>
        </div>
      </div>
    </div>

    <!-- 新建客户对话框 -->
    <div v-if="showCreate" class="dialog-mask">
      <div class="dialog">
        <div class="dialog-header">
          <span>新建客户</span>
          <span class="dialog-close" @click="onCloseCreate">×</span>
        </div>
        <div class="dialog-body">
          <div class="form-row">
            <label>客户名称</label>
            <input v-model="createForm.customerName" placeholder="请输入客户名称" />
          </div>
          <div class="form-row">
            <label>联系人ID</label>
            <input v-model.number="createForm.uId" type="number" placeholder="可留空" />
          </div>
          <div class="form-row">
            <label>联系人职位</label>
            <input v-model="createForm.contactPosition" placeholder="可留空" />
          </div>
          <div class="form-row">
            <label>联系电话</label>
            <input v-model="createForm.contactPhone" placeholder="可留空" />
          </div>
          <div class="form-row">
            <label>微信</label>
            <input v-model="createForm.wechat" placeholder="可留空" />
          </div>
          <div class="form-row">
            <label>邮箱</label>
            <input v-model="createForm.email" placeholder="可留空" />
          </div>
          <div class="form-row">
            <label>详细地址</label>
            <input v-model="createForm.address" placeholder="可留空" />
          </div>
          <div class="form-row">
            <label>开户行</label>
            <input v-model="createForm.bank" placeholder="可留空" />
          </div>
          <div class="form-row">
            <label>银行账号</label>
            <input v-model="createForm.bankAccountNumber" placeholder="可留空" />
          </div>
          <div class="form-row">
            <label>备注</label>
            <input v-model="createForm.remark" placeholder="可留空" />
          </div>
          <div class="form-row">
            <label>状态</label>
            <select v-model.number="createForm.status">
              <option :value="0">启用</option>
              <option :value="1">禁用</option>
            </select>
          </div>
        </div>
        <div class="dialog-footer">
          <button class="btn" @click="onCloseCreate">取消</button>
          <button class="btn btn-primary" :disabled="submitLoading" @click="onCreateSubmit">{{ submitLoading ? '提交中...' : '确定' }}</button>
        </div>
      </div>
    </div>

    <!-- 详情抽屉 -->
    <div v-if="showDetail" class="drawer-mask" @click.self="showDetail=false">
      <div class="drawer">
        <h3>{{ detail.customerName }} {{ detail.customerCode }} - 客户详情</h3>
        <div class="card">
          <div class="card-title">基础信息</div>
          <div class="form grid-2">
            <label>客户名称</label>
            <input :value="detail.customerName || '-'" disabled />
            <label>联系人</label>
            <input :value="detail.contactPersonName || '-'" disabled />
            <label>联系电话</label>
            <input :value="detail.contactPhone || '-'" disabled />
            <label>邮箱</label>
            <input :value="detail.email || '-'" disabled />
            <label>微信</label>
            <input :value="detail.wechat || '-'" disabled />
            <label>状态</label>
            <input :value="detail.status === 0 ? '启用' : '禁用'" disabled />
          </div>
        </div>
        <div class="card">
          <div class="card-title">其他信息</div>
          <div class="form grid-2">
            <label>详细地址</label>
            <input :value="detail.address || '-'" disabled />
            <label>开户行</label>
            <input :value="detail.bank || '-'" disabled />
            <label>银行账号</label>
            <input :value="detail.bankAccountNumber || '-'" disabled />
            <label>备注</label>
            <input :value="detail.remark || '-'" disabled />
           </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { customerPage, customerCreate, customerDetail } from '@/api/sale/customer'

export default {
  name: 'CustomerManagement',
  data() {
    return {
      tableData: [],
      total: 0,
      query: {
        pageNum: 1,
        pageSize: 10,
        customerName: '',
        status: undefined
      },
      showCreate: false,
      submitLoading: false,
      createForm: {
        customerName: '',
        uId: undefined,
        contactPosition: '',
        contactPhone: '',
        wechat: '',
        email: '',
        address: '',
        bank: '',
        bankAccountNumber: '',
        remark: '',
        status: 0
      },
      showDetail: false,
      detail: {}
    }
  },
  computed: {
    allSelected: {
      get() {
        return this.tableData.length > 0 && this.tableData.every(item => item._selected);
      },
      set(value) {
        this.tableData.forEach(item => {
          item._selected = value;
        });
      }
    },
    totalPages() {
      if (!this.total || !this.query.pageSize) return 1
      return Math.ceil(this.total / this.query.pageSize)
    }
  },
  mounted() {
    this.fetchPage()
  },
  methods: {
    async fetchPage() {
      const { data } = await customerPage(this.query)
      const page = data?.data || {}
      this.total = page.total || 0
      this.tableData = (page.records || []).map(r => ({ ...r, _selected: false }))
    },
    onSearch() {
      this.query.pageNum = 1
      this.fetchPage()
    },
    onReset() {
      this.query = { pageNum: 1, pageSize: 10, customerName: '', status: undefined }
      this.fetchPage()
    },
    changePage(p) {
      if (p < 1) return
      const max = this.totalPages
      if (p > max) return
      this.query.pageNum = p
      this.fetchPage()
    },
    onOpenCreate() {
      this.showCreate = true
    },
    async onCreateSubmit() {
      if (!this.createForm.customerName) {
        window.alert('请填写客户名称')
        return
      }
      try {
        this.submitLoading = true
        await customerCreate(this.createForm)
        this.onCloseCreate()
        this.onSearch()
      } finally {
        this.submitLoading = false
      }
    },
    onCloseCreate() {
      this.showCreate = false
      this.createForm = {
        customerName: '',
        uId: undefined,
        contactPosition: '',
        contactPhone: '',
        wechat: '',
        email: '',
        address: '',
        bank: '',
        bankAccountNumber: '',
        remark: '',
        status: 0
      }
    },
    async viewDetail(row) {
      this.showDetail = true
      const res = await customerDetail(row.id)
      const payload = res?.data || res
      if (payload && (payload.code === 200 || payload.success === true)) {
        this.detail = payload.data || {}
      } else {
        this.detail = row
      }
    },
    toggleStatus(row) {
      // 仅前端即时效果：0 启用 -> 1 禁用；1 禁用 -> 0 启用
      row.status = row.status === 0 ? 1 : 0
    }
  }
}
</script>

<style scoped>
.customer-management { background-color: #f7f8fa; padding: 20px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-header h2 { font-size: 20px; color: #333; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.action-icon { font-size: 18px; color: #666; cursor: pointer; position: relative; }
.icon-bell sup { position: absolute; top: -5px; right: -10px; background: red; color: white; border-radius: 50%; padding: 2px 5px; font-size: 10px; }
.content-area { background: white; padding: 20px; border-radius: 8px; }
.controls-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.btn { border: 1px solid #dcdfe6; background: white; padding: 8px 15px; border-radius: 4px; cursor: pointer; }
.btn-primary { background: #409eff; color: white; border-color: #409eff; }
.btn-search { background: #409eff; color: white; border-color: #409eff; margin-left: 10px; }
.btn-reset { margin-left: 10px; }
.search-filter { display: flex; align-items: center; gap: 10px; }
.search-filter label { color: #666; }
.search-filter input, .search-filter select { border: 1px solid #dcdfe6; padding: 8px; border-radius: 4px; }
.table-container { border: 1px solid #ebeef5; border-radius: 4px; }
.table-actions { padding: 10px; background: #fafafa; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ebeef5; }
.data-table th { background: #fafafa; color: #606266; font-weight: 500; }
.data-table td { color: #606266; }
.customer-name { color: #409eff; cursor: pointer; }
.table-footer { display: flex; justify-content: space-between; align-items: center; padding: 15px; }
.footer-actions { display: flex; align-items: center; gap: 10px; }
.btn-export { border: 1px solid #dcdfe6; background: white; padding: 8px 15px; border-radius: 4px; cursor: pointer; }
.pagination { display: flex; align-items: center; gap: 5px; }
.pagination button { border: 1px solid #dcdfe6; background: white; padding: 5px 10px; cursor: pointer; }
.pagination button.active { background: #409eff; color: white; border-color: #409eff; }

.drawer-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.2); display: flex; justify-content: flex-end; z-index: 2100; }
.drawer { background: #fff; width: 520px; padding: 12px; height: 100%; overflow: auto; }
.card { border: 1px solid #ebeef5; border-radius: 6px; padding: 10px; margin-bottom: 12px; }
.card-title { font-weight: 600; margin-bottom: 8px; }
.form { display: grid; grid-template-columns: 100px 1fr; gap: 8px; }
.grid-2 { grid-template-columns: 100px 1fr 100px 1fr; }
.link { color: #409eff; background: transparent; border: none; cursor: pointer; }

.status-btn { border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 14px; font-size: 12px; cursor: pointer; }
.status-btn.ok { background: #e6f7ff; color: #1890ff; border-color: #91d5ff; }
.status-btn.ban { background: #fff1f0; color: #f5222d; border-color: #ffa39e; }
</style>
